<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>低版本浏览器升级提醒</title>
  <style>
    a,
    body,
    h1,
    i,
    li,
    p,
    ul {
      margin: 0;
      padding: 0
    }

    body {
      font-size: 14px;
      line-height: 1.5;
      padding-bottom: 50px
    }

    .container h1 span,
    .sprite {
      vertical-align: middle;
      *zoom: 1
    }

    .box ul li,
    .box-title,
    .pc-box li a {
      text-align: center
    }

    .box-title b,
    .pc-box li a b {
      font-weight: 400
    }

    .chrome,
    .firefox {
      margin-top: 30px;
      width: 64px;
      height: 64px;
      background-size: cover;
      display: inline-block;
    }

    .chrome {
      background: url() center center no-repeat;
    }

    .firefox {
      background: url() center center no-repeat;
    }

    .sprite.pc {
      background: url() center center no-repeat;
      width: 122px;
      height: 110px;
      background-size: cover;
      display: inline-block;
      margin-top: 50px;
    }

    a {
      outline: 0;
      text-decoration: none
    }

    a img {
      border: none
    }

    li,
    ul {
      list-style: none
    }

    em,
    i {
      font-style: normal
    }

    .container {
      width: 990px;
      margin: 70px auto 0;
      position: relative
    }

    .container h1 {
      margin-bottom: 40px;
      font-size: 18px
    }

    .container .warn {
      color: #F40;
      line-height: 26px;
      text-align: center;
    }

    .box {
      height: 260px;
      margin-top: 10px;
      position: relative;
      background-color: #f0f7ed;
      padding-left: 260px
    }

    .box-title {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      height: 260px;
      width: 230px;
      background-color: #87c308;
      color: #FFF
    }

    .box-title-text {
      line-height: 30px;
      font-size: 14px;
    }

    .box-title i {
      margin-top: 46px
    }

    .box-title b {
      display: block;
      font-size: 22px;
      line-height: 90px
    }

    .box-title .arrow {
      border: 15px solid transparent;
      border-right-width: 12px;
      border-left: 12px #87c308;
      _border-color: pink;
      _filter: chroma(color=pink);
      position: absolute;
      right: -24px;
      top: 50%;
      margin-top: -12px;
      width: 0;
      height: 0;
      line-height: 0;
      font-size: 0
    }

    .box ul {
      overflow: hidden;
      padding-top: 30px;
    }

    .box ul li {
      float: left;
      display: inline;
      *zoom: 1;
      width: 240px;
      height: 230px
    }

    .box ul li.chrome-item {
      width: 48%;
    }

    .box ul li.seperator {
      width: 1px;
      border-right: 1px solid #FFF;
      border-left: 1px solid #e9f3e1
    }

    .chrome-item {
      color: #87c308
    }

    .pc-box li a {
      display: inline-block;
      *display: inline;
      *zoom: 1;
      width: 168px;
      height: 40px;
      line-height: 40px;
      color: #FFF;
      background-color: #87c308;
      position: relative;
      font-size: 18px
    }

    .pc-box li p {
      margin-top: 18px;
      margin-bottom: 10px
    }

    .pc-box li a:hover em {
      right: 16px
    }

    .pc-box li a:hover i {
      right: 18px
    }

    .pc-box li a em,
    .pc-box li a i {
      _border-color: pink;
      _filter: chroma(color=pink);
      border: 7px solid transparent;
      border-right-width: 6px;
      border-left: 6px #41901a;
      position: absolute;
      right: 18px;
      top: 13px;
      width: 0;
      height: 0;
      line-height: 0;
      font-size: 0
    }

    .pc-box li a i {
      border-left-color: #87c308;
      right: 20px
    }

    .uaMassage {
      text-align: center;
      line-height: 40px;
      color: #909090;
    }
  </style>
</head>

<body>
  <div class="container">
    <h1 class="warn">温馨提醒：为了您更好的用户体验，请下载或升级Chrome浏览器后再使用。</h1>
    <div class="box pc-box">
      <span class="box-title">
        <div class="sprite pc"></div>
        <div class="box-title-text">
          <strong>浏览器升级推荐</strong>
          <em class="arrow"></em>
        </div>
      </span>
      <ul>
        <li class="chrome-item">
          <div class="chrome"></div>
          <p>谷歌浏览器</p>
          <a target="_blank" href="https://www.google.cn/chrome/">
            <strong>官方下载</strong>
          </a>
        </li>
        <li class="seperator"></li>
        <li class="chrome-item">
          <div class="chrome"></div>
          <p>谷歌浏览器</p>
          <a target="_blank" href="https://pc.qq.com/detail/1/detail_2661.html">
            <strong>腾讯云下载</strong>
          </a>
        </li>
        <!-- <li class="seperator"></li>
        <li class="chrome-item">
          <div class="firefox"></div>
          <p>火狐浏览器</p>
          <a target="_blank" href="https://www.firefox.com.cn">
            <strong>官网下载</strong>
          </a>
        </li> -->
      </ul>
    </div>
    <div class="uaMassage" id="uaMassage"></div>
  </div>
  <script>
    document.getElementById('uaMassage').innerHTML = '当前浏览器版本：' + navigator.userAgent + location.search;
  </script>
</body>

</html>